{include file="member.header.login.html"}
<script type="text/javascript">
!function($){
    function support() {
          return 'placeholder' in document.createElement('input');
        }
    $.fn.lrRerify=function(){
      var form=this;
      var elements = form.find("input[placeholder]");
      if(!support()){
            elements.each(function(){
          var v=$(this).val();
          var pv=$(this).attr('placeholder');
          var wrap=$(this).siblings('label');
          wrap.html(pv);
          if(v){
            wrap.hide();
          }
          $(this).bind('focus',function(){
            $(this).addClass('hover');
            wrap.hide();
          });
          $(this).bind('blur',function(){
            var v2=$(this).val();
            $(this).removeClass('hover');
            if(!v2){
              wrap.show();
            }
          });
        });
          }else{
            elements.each(function(){
              $(this).bind('focus',function(){
            $(this).addClass('hover');
          });
          $(this).bind('blur',function(){
            $(this).removeClass('hover');
          });
            });
          }
      
    };
  }(jQuery);
$(function(){
    $('#register_form').validate({
         errorPlacement: function(error, element) {
           element.parent().parent().next('td').append(error);
        },
        success: function(label) {
            label.html("ok").addClass("checked");
        },
        onkeyup: false,
        rules : {
            user_name : {
                required : true,
                isCheckAccount:true,
                remote   : {
                    url :'index.php?app=member&act=check_user&ajax=1',
                    type:'get',
                    data:{
                        user_name : function(){
                            return $('#user_name').val();
                        }
                    }
                }
            },
            password : {
                required : true,
                byteRange: [6,20,'{$charset}'],
                checkPassword:true
            },
            password_confirm : {
                required : true,
                equalTo  : '#password'
            },
            captcha : {
                required : true,
                remote   : {
                    url : 'index.php?app=captcha&act=check_captcha',
                    type: 'get',
                    data:{
                        captcha : function(){
                            return $('#captcha1').val();
                        }
                    }
                }
            },
            mobile_verification_code : {
                required : true,
                isCode    : true, 
                remote   : {
                    url :'index.php?app=send_mobile&act=chack_verification_code',
                    type:'post',
                    data:{
                        mobile_verification_code : function(){
                            return $('#mobile_verification_code').val();
                        }
                    }
                }               
            },
            agree : {
                required : true
            }
        },
        messages : {
            user_name : {
                required : '账户名不能为空',
                remote   : '您提供的用户名已存在'
            },
            password  : {
                required : '密码不能为空',
                byteRange: '密码必须在6-20个字符之间'
            },
            password_confirm : {
                required : '确认密码不能为空',
                equalTo  : '两次输入的密码不一致'
            },
            captcha : {
                required : '验证码不能为空',
                remote   : '验证码错误'
            },
            mobile_verification_code : {
                required : '手机验证码不能为空',
                isCode    : '手机验证码为6位的数字',
                remote    : '手机验证码不正确'
            },
            agree : {
                required : '您必须阅读并同意该协议,否则无法注册'
            }
        }
    });
    $('#register_form').lrRerify();
    $("#send_mobile_code").click(function(){
        var phone_mob = $("#user_name").val();  
        if(phone_mob && userValidate.chacMobile(phone_mob))
        {
           userValidate.setMobileSession(phone_mob);
           userValidate.sendMobile(phone_mob,'register_mobile');
           return;
        }
  });
  $("#user_name").blur(function(){
        var phone_mob = $("#user_name").val();
        if(phone_mob && userValidate.chacMobile(phone_mob))
        {
            $.get('index.php?app=member&act=check_user&ajax=1&user_name='+phone_mob,function(data){
                if(data==='true'){
                   $("#ordinary_code").hide();
                   $("#mobile_code").show();
                   $("#captcha1").attr("disabled", true);
                   $("#mobile_verification_code").attr("disabled", false); 
                }else{
                   $("#ordinary_code").show();
                   $("#mobile_code").hide();
                   $("#mobile_verification_code").attr("disabled", true);
                   $("#captcha1").attr("disabled", false); 
                }
            });
        }else{
           $("#ordinary_code").show();
           $("#mobile_code").hide();
           $("#mobile_verification_code").attr("disabled", true);
           $("#captcha1").attr("disabled", false); 
        }
  }).bind('keyup',function(){
      var v=$(this).val();
      var i,len,str;
      dataArr.wrap.empty();
      if(dataArr.reg.test(v)){
          str=v.substring(0,v.indexOf('@'));
          if(!str){
            wl.sConfirm( { 'info':'邮箱名不能为空', 'cancel':true} );
            return;
          }
          for(i=0,len=dataArr.email.length;i<len;i++){
            var html=$('<li data-key="'+str+dataArr.email[i]+'" onclick="handel.exchange(this)">'+str+dataArr.email[i]+'</li>');
            dataArr.wrap.append(html);
          }
      }
  });
  $('#password').keyup(function(){
        userValidate.chkPWPower(this.value);        
    });
  var dataArr={
    reg:/\@/,
    wrap:$('#datalist'),
    email:['@163.com','@126.com','@qq.com','@sina.com','@gmail.com','@sohu.com','@189.com','@139.com','@vip.163.com','@vip.126.com']
  };

});
var handel={
  agreement:function(){
    $('#agreement').toggle();
  },
  exchange:function(o){
      var options={
          v:$(o).attr('data-key'),
          main:$("#user_name"),
          con:$('#datalist')
      };
      options.main.val(options.v);
      options.con.empty();
      options.main.get(0).focus();
  },
  check:function(ev){
    var cur=$(ev.target);
      if(cur.attr('id')!='user_name'){
        $('#datalist').empty();
      }
  }
};
</script>
<!-- 内容 -->
<div class="content-warp">
  <div class="register-wrap">
    <!-- <div class="content-l"> <img src="{res file=images/member/loginbg.jpg}" alt="" /> </div> -->
    <div class="register-r">
      <form action="" method="post" class="registerFrm b-radius" id="register_form">
        <table width="100%" class="register-title">
          <tr>
            <td class="f-cb">
                <h3 class="f-fl">用户注册</h3>
                <span class="f-fr"> 已经注册？ <a href="index.php?app=member&act=login" >现在登录</a></span>
            </td>
          </tr>
        </table>
        <table width="100%" onclick="handel.check(event)">
          <tr>
            <td align="right" width="280"><i>*</i>账户名：</td>
            <td width="200">
                  <div class="valid-d">
                        <input type="text" id="user_name" name="user_name" maxlength="30" class="text b-radius" placeholder="用户名/邮箱/手机" />
                        <label for="user_name" class="tips"></label>
                        <ul id="datalist"></ul>
                  </div>
            </td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td align="right"><i>*</i>密码：</td>
            <td><div style="position:relative;z-index: 5;">
                <input type="password" name="password" id="password" maxlength="20" class="text b-radius" placeholder="密码" />
                <label for="password" class="tips"></label>
              </div></td>
              <td>&nbsp;</td>
          </tr>
          <tr>
              <td style="padding: 2px 10px;">&nbsp;</td>
              <td style="padding: 2px 10px;"><p class="level" id="level"><span class="low" id="low">弱</span><span class="middle" id="middle">中</span><span class="strong" id="strong">强</span><input type="hidden" name="password_level" id="password_level" value="1" /></p></td>
              <td>&nbsp;</td>
          </tr>
          <tr>
            <td align="right"><i>*</i>确认密码：</td>
            <td><div style="position:relative;z-index: 5;">
                <input type="password" name="password_confirm" maxlength="20" id="password_confirm" class="text b-radius" placeholder="密码" />
                <label for="password_confirm" class="tips"></label>
              </div></td>
              <td>&nbsp;</td>
          </tr>
          <tr id="ordinary_code">
            <td align="right"><i>*</i>验证码：</td>
            <td class="f-cb"><div class="f-cb"><input type="text" name="captcha" class="verify b-radius" id="captcha1" />
              <a href="javascript:change_captcha($('#captcha'));" class="renewedly"> <img id="captcha" class="f-fl ml10" src="index.php?app=captcha&amp;{$random_number}" title="点我刷新" /></a></div>
              </td>
              <td>&nbsp;</td>
          </tr>
          <tr id="mobile_code" style="display: none;">
            <td align="right"><i>*</i>验证码：</td>
            <td class="f-cb"><div class="f-cb"><input type="text" name="mobile_verification_code" maxlength="6" id="mobile_verification_code" disabled="disabled" class="verify b-radius" />&nbsp;&nbsp;<input class="button_on b-radius" type="button" value="获取短信验证码" id="send_mobile_code" /></div></td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td  colspan="3" style=" padding:0px; color:red; text-align:center;"><p id="show_error" style="display:none">验证码已经发送,敬请查看!</p></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td><input type="submit" name="submit" value="注册" class="btn b-radius" /><input type="hidden" name="ret_url" value="{$ret_url}" /></td>
            <td>&nbsp;</td>
          </tr>
        </table>
      </form>
      <div id="agreement" class="agreement">
      </div>      
    </div>
  </div>
</div>
<!-- 页脚 -->
{include file="footer.index.simple.html"}